<template>
  <view>
    <view class="hpv-img">
      <image src="https://qita-1252107261.cos.ap-chengdu.myqcloud.com/yiliao/gongjinai.jpg" mode="aspectFill"></image>
    </view>
    <!-- 筛选导航 -->
    <view class="tab-view">
      <view class="tab-toggle" v-for="(item,index) in list.hpv_select" :key="index" @click="go(index)">
        <text>{{ item.name }}</text>
        <text :class="index===key?'checked':''"></text>
      </view>
    </view>
    <!-- 疫苗列表 -->
    <view class="hpv-list" v-for="(item,index) in sun" :key="index">
      <view>
        <view class="hpv-type">{{ item.name }}</view>
        <view class="hpv-age">
          <text v-for="(it,k) in item.describe" :key="k">{{ it }}</text>
        </view>
        <view class="hpv-price">¥{{ item.price[0] }}-¥{{ item.price[1] }}</view>
      </view>
      <view class="hpv-reserve" @click="go1(item)">去预约</view>
    </view>
    <!-- 高度 -->
    <view style="height:150px"></view>
  </view>
</template>

<script>
import {otuhpvlist} from "../../utils/API/vaccineorder";

export default {
  data() {
    return {
      list: [],
      key: 0
    };
  },
  methods: {
    async xuan() {
      let {data} = await otuhpvlist()
      this.list = data[0];

    },
    go(id) {
      this.key = id;
    },
    go1(item) {
      wx.navigateTo({
        url: '/pages/reshav/reshav?item=' + JSON.stringify(item)
      })
    }
  },
  mounted() {
    this.xuan()
  },
  computed: {
    sun() {
      var arr = []
      if (this.key === 0) {
        arr = this.list.hpv_list
      } else {
        arr = this.list.hpv_list.filter(item => {
          return item.hpv_id === this.list.hpv_select[this.key]._id;
        })
      }
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #fafafa;
}

.hpv-img {
  height: 350rpx;
}

.hpv-img image {
  height: 350rpx;
  width: 100%;
  display: block;
}

/* tab切换 */
.tab-view {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
  //background-color: #0d7cff;
}

.tab-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100rpx;
  justify-content: center;
  position: relative;

  text {

  }
}

.checked {
  width: 50rpx;
  height: 8rpx;
  background-color: #0d7cff;
  position: absolute;
  bottom: 0;
}

/* 疫苗列表 */
.hpv-list {
  background-color: #ffffff;
  margin: 20rpx;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  border-radius: 20rpx;
}

.hpv-type {
  font-size: 35rpx;
}

.hpv-age {
  display: flex;
  align-items: center;
}

.hpv-age text {
  background-color: #f4f6fa;
  padding: 7rpx;
  font-size: 25rpx;
  margin: 10rpx 10rpx 10rpx 0;
}

.hpv-price {
  font-weight: bold;
  color: #ff5f2c;
}

.hpv-reserve {
  align-self: flex-end;
  background-color: #0d7cff;
  padding: 15rpx 30rpx;
  border-radius: 40rpx;
  color: #ffffff;
}
</style>
